<div class="modal-dialog" role="document" id="feedbackModal">
    <form data-bind="submit: send" novalidate>
        <div class="modal-dialog" role="document">
            <div class="modal-content" data-bind="with: model">
                <div class="modal-body">
                    <div class="clearfix">
                        <div class="feedback-image margin-bottom"></div>
                    </div>
                    <div class="flex-horizontal">
                        <div class="flex-grow">
                            Does your feedback concern the <strong data-bind="text: $parent.moduleTitle"></strong> feature?
                        </div>
                        <div class="flex-vertical yes-no-buttons">
                            <button class="btn btn-default" data-bind="css: { 'active': viewSpecific }, click: _.partial(viewSpecific, true)">Yes</button>
                            <button class="btn btn-default" data-bind="css: { 'active': !viewSpecific() }, click: _.partial(viewSpecific, false)">No, something else</button>
                        </div>
                    </div>
                </div>
                <div class="panel panel-info">
                    <div class="collapse" data-bind="collapse: viewSpecific">
                        <div class="modal-body">
                            <div class="row row-sm">
                                <div class="col-sm-6">
                                    <button type="button" class="btn btn-success btn-block" data-bind="click: _.partial(featureImpression, 'positive'), css: { 'active': featureImpression() === 'positive' }">
                                        <i class="icon-thumb-up"></i> <span>I like it</span>
                                    </button>
                                </div>
                                <div class="col-sm-6">
                                    <button type="button" class="btn btn-danger btn-block" data-bind="click: _.partial(featureImpression, 'negative'), css: { 'active': featureImpression() === 'negative' }">
                                        <i class="icon-thumb-down"></i> <span>Could be better</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group" data-bind="validationElement: name">
                                <input type="text" placeholder="Name" class="form-control" data-bind="textInput: name">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group" data-bind="validationElement: email">
                                <input type="email" placeholder="Email" class="form-control" data-bind="textInput: email">
                            </div>
                        </div>
                    </div>
                    <div class="form-group" data-bind="validationElement: message">
                        <textarea class="form-control" placeholder="Message" rows="6" data-bind="textInput: message">
                        </textarea>
                    </div>
                    <div class="flex-horizontal">
                        <div>
                            <a class="btn btn-info" href="https://issues.hibernatingrhinos.com/issues/RavenDB" target="_blank">
                                <i class="icon-bug"></i> <span>Bug Tracker</span>
                            </a>
                        </div>
                        <div class="flex-separator"></div>
                        <div>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary" data-bind="css: { 'btn-spinner': $root.spinners.send }, disable: $root.spinners.send">
                                <i class="icon-rocket"></i> <span>Send</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
